<template>
    <div>
     <h1>房价信息列表展示</h1>
     <a href="/AddPriceView">房价信息录入</a>
     <br>
    
     <table class="table">
        <thead>
            <tr>
                <td>房型名称</td>
                <td>产品名称</td>
                <td>电话</td>
                <td>价格</td>
                <td>地址</td>
                <td>状态</td>
                <td>操作</td>
                
            </tr>
        </thead>
        <tbody>
            <tr v-for="a in data">
               <td>{{a.typeName  }}</td>
                <td>{{ a.name }}</td>
                <td>{{ a.phone }}</td>
                <td>{{ a.price }}</td>
                <td>{{a.addr  }}</td>
                <td>{{a.start==1?"预定付费":"到店付费"  }}</td>
                <td><input type="button" value="修改" @click="UptPrice(a.id)"></td>
            </tr>
        </tbody>
     </table>
     共{{swert.totalpage  }}页，共{{ swert.count }}行，当前第{{find.index  }}页，每页{{find.size  }}行
     <input type="button" value="首页" @click="Fanye(1)">
      <input type="button" value="上一页" @click="Fanye(find.index-1)">
      <input type="button" v-for="c in swert.totalpage" :value="c" @click="Fw(c)">
       <input type="button" value="下一页" @click="Fanye(find.index+1)">
        <input type="button" value="尾页" @click="Fanye(swert.totalpage)">
        <select v-model="find.size" @click="fs">
            <option :value="2">请选择</option>
             <option :value="3">每页三行</option>
              <option :value="5">每页五行</option>
               <option :value="7">每页七行</option>
        </select>
        跳转：
        <input type="number" v-model="tets">
        <input type="button" value="跳转" @click="Fanye(tets)">
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from "vue"
import axios from 'axios';
import moment from "moment";
import { useRouter } from "vue-router";
const router=useRouter()
const UptPrice=(id:any)=>{
    router.push({path:"UptPriceView",query:{id:id}})
}
onMounted(()=>{
    Show()
})
const data=ref([{
     "id": 2,
      "roomTypeId": 1,
      "name": "床头柜",
      "phone": "16772888394",
      "price": 300,
      "addr": "北京市",
      "start": 1,
      "typeName": "单人房"
}])
const Fanye=(val:any)=>{
    if(val>=1 && val<=swert.value.totalpage){
        find.value.index=val
        Show()
    }
}
const fs=()=>{
    find.value.index=1
    Show()
}
const Fw=(val:any)=>{
       find.value.index=val
       Show()
}
const Show=()=>{
    axios.get("https://localhost:7162/api/RoomPrice/GetRoomPrice",{params:find.value}).then(res=>{
        data.value=res.data.data
        swert.value.count=res.data.count
        swert.value.totalpage=Math.ceil(swert.value.count/find.value.size)
    })
}
const find=ref({
   
    index:1,
    size:2
})
const swert=ref({
    count:0,
    totalpage:0
})

</script>

<style scoped>

</style>